<template>
  <y-dialog
    @open="open"
    :title="form.step"
    @close="emit('close')"
    width="1000px"
    append-to-body
  >
    <el-descriptions direction="vertical" :column="1" border>
      <div v-if="form.binding">
        <el-descriptions-item label="协议名称" v-if="form.binding.protocol">
          <router-link
            :to="'/rms/protocol-info/index/' + form.binding.protocol.value"
            class="link-type"
          >
            <span>{{ form.binding.protocol.label }}</span>
          </router-link>
        </el-descriptions-item>
        <el-descriptions-item label="报文名称" v-if="form.binding.packet">
          <router-link
            v-if="form.binding.packet"
            :to="'/rms/packet-info/index/' + form.binding.packet.value"
            class="link-type"
          >
            <span>{{ form.binding.packet.label }}</span>
          </router-link>
        </el-descriptions-item>
        <el-descriptions-item label="字段名称" v-if="form.binding.name">{{
          form.binding.name
        }}</el-descriptions-item>
      </div>
      <el-descriptions-item label="期望值">
        {{ form.exp }}
      </el-descriptions-item>
      <el-descriptions-item label="样本数据">{{
        form.pcap
      }}</el-descriptions-item>
      <el-descriptions-item label="样本规则">
        {{ form.rule }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="emit('close')">关闭</el-button>
      </div>
    </template>
  </y-dialog>
</template>

<script setup name="StepInfo">
const emit = defineEmits(["close"]);

const data = reactive({
  form: {},
});

const { form } = toRefs(data);

const props = defineProps({
  step: {},
});

/** 打开对话框事件 */
function open() {
  form.value = props.step;
}
</script>
